import React, { Component } from "react";
import { connect } from "react-redux";
import { Toast, InputItem, Button } from "antd-mobile";
import yhTools from "../../../../tools/yh";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import { InterfaceG } from "../../../../config/Config";

import "./AuthPay.scss";

class AuthPay extends Component {
	constructor(props) {
		super(props);
		let params = JSON.parse(this.props.match.params.data);
		this.channelCode = params.channelCode;
		this.bankMobile = params.bankMobile; // 手机号
		this.cardNo = params.cardNo; // 卡号
		this.userName = params.userName; // 姓名
		this.bankName = params.bankName; // 银行名称
		this.idCard = params.idCard; // 身份证编号
		this.payRouteCode = params.payRouteCode; // 路由编码
		this.amount = params.amount; // 金额
		this.state = {
			timeText: "获取验证码",
			time: 60,
			yzmValue: ""
		};
		this.timer = null;
		this.isOpen = true;

		this.tradeNumber = "";
		this.openId = "";
	}

	componentDidMount() {
		// this.countdown();
	}

	componentWillUnmount() {
		clearInterval(this.timer);
	}

	changeyzm(yzmValue) {
		this.setState({ yzmValue });
	}

	// 协议签约重获取验证码接口
	getVerifyCode() {
		if (!this.isOpen) {
			return;
		}

		const params = {
			url: InterfaceG.getEleAcctSignCode,
			header: this.props.getAppPlatformsDatas,
			params: {
				channelCode: this.channelCode, // 渠道编码
				payRouteCode: this.payRouteCode // 路由编码
			},
			_alertShow: false
		};
		Toast.loading("正在发送...", 100, () => {});
		yhTools
			.request(params)
			.then(res => {
				Toast.hide();
				if (res.code === "0") {
					this.tradeNumber = res.data.tradeNumber; // 签约流水号
					this.payRouteCode = res.data.payRouteCode; // 路由编码
					this.openId = res.data.openId; // 用户唯一ID
					this.countdown();
				} else {
					Toast.info(res.message, 2);
				}
			})
			.catch(() => {
				Toast.hide();
			});
	}

	//倒计时
	countdown() {
		this.isOpen = false;
		const _this = this;
		let { time } = this.state;
		this.timer = setInterval(() => {
			if (time < 1) {
				clearInterval(this.timer);
				this.isOpen = true;
				_this.setState({ time: 60, timeText: "重新获取" });
			} else {
				time--;
				_this.setState({ time: time, timeText: `${time}秒` });
			}
		}, 1000);
	}

	// 签约确认接口
	paySign() {
		const { yzmValue } = this.state;
		if (!yzmValue) {
			Toast.info("请输入验证码");
			return false;
		}
		if (yzmValue.length < 6) {
			Toast.info("请输入正确的验证码");
			return false;
		}
		if (this.tradeNumber === "") {
			Toast.info("请先获取验证码");
			return false;
		}
		const params = {
			url: InterfaceG.eleAcctSignAuth,
			header: this.props.getAppPlatformsDatas,
			params: {
				channelCode: this.channelCode, // 渠道编码
				payRouteCode: this.payRouteCode, //路由编码
				openId: this.openId, //用户唯一ID
				tradeNumber: this.tradeNumber, //签约流水号
				activeCode: this.state.yzmValue //短信验证码
			},
			_alertShow: false
		};
		Toast.loading("正在提交中...", 100, () => {});
		yhTools
			.request(params)
			.then(res => {
				Toast.hide();
				if (res.code === "0") {
					let data = {
						channelCode: this.channelCode,
						amount: this.amount,
						goBackIndex: -3
					};
					this.props.history.push({
						pathname: `/AuthenticatePayCode/${JSON.stringify(data)}`
					});
				} else {
					Toast.info(res.message, 2);
				}
			})
			.catch(() => {
				Toast.hide();
			});
	}

	render() {
		const headerParams = {
			header: {
				title: "协议支付签约"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		const { timeText } = this.state;
		return (
			<MainLayout pageParams={headerParams}>
				<div className="authPay">
					<div className="card">
						<p className="card-l">卡号</p>
						<div className="card-r">
							<p className="card-number">{this.cardNo}</p>
							<p className="card-name">{this.bankName} 储蓄卡</p>
						</div>
					</div>
					<ul className="info">
						<li>
							<p className="info-l">姓名</p>
							<div className="info-r">
								<p>{this.userName}</p>
							</div>
						</li>
						<li>
							<p className="info-l">身份证</p>
							<div className="info-r">
								<p>{this.idCard}</p>
							</div>
						</li>
					</ul>
					<ul className="info info-input">
						<li>
							<p className="info-l">手机号</p>
							<div className="info-r phone">
								<p>{this.bankMobile}</p>
							</div>
						</li>
						<li className="yzm-box" ref="zym">
							<InputItem
								maxLength={6}
								type="number"
								placeholder="请输入短信验证码"
								onChange={this.changeyzm.bind(this)}
								value={this.state.yzmValue}
							>
								验证码
							</InputItem>
							<div className="info-yzm" onClick={this.getVerifyCode.bind(this)}>
								{timeText}
							</div>
						</li>
					</ul>
					<div className="btn">
						<Button onClick={this.paySign.bind(this)} type="primary">
							下一步
						</Button>
					</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const AuthPayPage = connect(mapStateToProps, mapDispatchToProps)(AuthPay);
export default AuthPayPage;
